<template>
    <div>
        <!-- 商品管理模块 -->
            <el-card>
                <div slot="header" class="clearfix">
                    <span>商品管理</span>
                    
                    <el-button class="button" type="primary" @click="putaway">上架</el-button>
                    <el-button class="button" type="primary" @click="soldOut">下架</el-button>
                    <el-button class="button" type="primary" @click="createNewGood">新建商品</el-button>
                </div>
                <el-tabs tab-position="left" v-model="groupType" @tab-click="changeGroupType" >                    
                    <el-tab-pane v-for="item in groupsList" :key="item.id" :label="item.name" >
                        <!-- 展示类型为item.id产品列表 -->
                        <el-table  ref="multipleTable"  :data="type_goodsList" tooltip-effect="dark" style="width: 100%"  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column  label="菜品" >
                                <template slot-scope="scope">
                                    <el-card body-style="padding:'10px'">  
                                        <img :src="scope.row.imageList[0].url" class="image">
                                        <div style="padding: 14px;">
                                            <span>{{ scope.row.name}} </span>
                                            <span style="font-size:10px">{{scope.row.desc}}</span>
                                            <span class='price'>￥{{ scope.row.price }}</span>
                                        </div>
                                    </el-card>
                                </template>
                            
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="100">
                                <template slot-scope="id">                        
                                    <el-button type="text" size="small">编辑</el-button>
                                    <el-button  type="text" size="small" @click="deleteGoods(id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    
                </el-tabs>
            </el-card>

    </div>
</template>
<script>
export default {
    props:['goodsList','groupsList'],
    data() {
    return {
        type_goodsList:[],
        groupType:'',
        shop_id : localStorage.getItem('shop_id')
    };
  },
  mounted(){
  },
  watch:{
    groupsList(newValue){
        if(this.goodsList.length==0) return;
        //debugger
        let name = this.groupsList[this.groupType].name
        this.changeGroupType({label:name})
    },
    goodsList(nValue){
        if(this.groupsList.length==0) return;
        //debugger
        let name = this.groupsList[this.groupType].name
        this.changeGroupType({label:name})
    },
  },  
  methods:{
      createNewGood(){
        this.$router.push({name:'newGoods',params:{id:1,groups:this.groupsList}})
      },
      createNewGroup(){
          this.$prompt('请输入分组名称', '新建分组', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {

            //创建分组
            this.tableData.push({
                name:value,
                amount:0
            })
          this.$message({
            type: 'success',
            message: `新建分组: ${value} 成功!`
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      deleteGroup(id){
            let tindex = -1;
            for (let index = 0; index < this.tableData.length; index++) {
                if(this.tableData[index].id === id.row.id){
                    tindex = index;
                }            
            }
            if(tindex!=-1){
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    

                    // this.tableData[id.row.id]
                    this.tableData.splice(tindex,1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            }else
            {
                this.$message({
                        type: 'warning',
                        message: '未找到该记录'
                    }); 
            }
          
      },
      deleteGoods(id){
          this.$message("删除商品")
      },
      soldOut(){
           this.$message("下架")
      },
      putaway(){
          this.$message("上架")
      },
      handleSelectionChange(){

      },
      changeGroupType(tab, event){
        let typeName = tab.label
        let dGoodsList = []
        
        this.goodsList.map(item=>{
            if(item.groups.contains(typeName)){
                dGoodsList.push(item)
            }
        })
        this.type_goodsList = dGoodsList
      }

  }
}
</script>

<style lang="scss" scoped>

.image{
    width: 100px;
    display: block;
}
.price{
    color: red;
}
.button{
    float:right;
    margin-left:5px;

    padding:5px;
}
</style>
